<template>
  <div class="main" v-loading="loading">
    <div class="search">
      <el-input suffix-icon="el-icon-search" placeholder="请输入客户名称或编号" v-model="search" type="search"
                @change="searchCustom"></el-input>
    </div>
    <div class="result">
      <el-collapse>
        <div v-if="result.length === 0" class="no-data">无数据</div>
        <el-collapse-item v-for="item in result" :title="item.khname" :key="item.khbh">
          <el-row class="des-box">
            <el-col :span="6" class="des-title">客户编号</el-col>
            <el-col :span="6" class="des-content">{{ item.khbh }}</el-col>
            <el-col :span="3" class="des-title">客户名</el-col>
            <el-col :span="9" class="des-content">{{ item.khname }}</el-col>
            <el-col :span="6" class="des-title">手机</el-col>
            <el-col :span="6" class="des-content">{{ item.phone }}</el-col>
            <el-col :span="6" class="des-title">电话</el-col>
            <el-col :span="6" class="des-content">{{ item.tele }}</el-col>
            <el-col :span="6" class="des-title">地址</el-col>
            <el-col :span="18" class="des-content">{{ item.address }}</el-col>
          </el-row>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
import {queryCustom} from "@/api/goods";

export default {
  name: "index",
  data() {
    return {
      search: '',
      result: [],
      loading: false
    }
  },
  methods: {
    searchCustom() {
      this.loading = true
      queryCustom(this.search).then(res => {
        if (res.code === 200) {
          this.result = res.data
          if (res.data.length === 0) {
            this.$toast.open({
              message: '无数据',
              type: 'warning',
              duration: 2000,
              dismissible: true,
              position: 'top'
            })
          }
        }
      }).finally(_ => {
        this.loading = false
      })

      this.$buryingPoint('查询客户', this.search)
    },
    getHistory(spbh) {
      this.$router.push({path: "/Goods/historyPrice", query: {spbh}})
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  max-width: 600px;
  padding: 10px;
  text-align: center;

  .search {
  }

  .result {
    .no-data{
      padding:20px;
      color: #ccc;
    }

    .des-box {
      border-top: 1px solid #6595c7;
      border-left: 1px solid #6595c7;
    }

    .des-title {
      height: 32px;
      background-color: #c1d7ea;
      display: flex;
      align-items: center;
      padding-left: 10px;
      border-bottom: 1px solid #6595c7;
      border-right: 1px solid #6595c7;
    }

    .des-content {
      height: 32px;
      display: flex;
      align-items: center;
      padding-left: 10px;
      border-bottom: 1px solid #6595c7;
      border-right: 1px solid #6595c7;
    }
  }
}
</style>
